<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>库存日历</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="page_line"></view>
		<u-sticky :offset-top="88+StatusBarRpx">
			<view class="search_view">
				<view class="search_input flex align-center">
					<image :src='STATIC_URL+"451.png"' mode="aspectFill"></image>
					<input v-model="keyword" class="input" type="text" placeholder="输入关键词搜索..." placeholder-style="font-size:30rpx;color:#999;" @confirm="getSearch">
				</view>
				<view class="types flex align-center">
					<view class="types_item flex align-center">
						<view class="types_item_c_1"></view>
						<view class="types_item_text">租车订单</view>
					</view>
					<!-- <view class="types_item flex align-center">
						<view class="types_item_c_2"></view>
						<view class="types_item_text">三方订单</view>
					</view> -->
					<view class="types_item flex align-center">
						<view class="types_item_c_3"></view>
						<view class="types_item_text">停运</view>
					</view>
					<view class="types_item flex align-center">
						<view class="types_item_c_4"></view>
						<view class="types_item_text">空闲</view>
					</view>
					<!-- <view class="types_item flex align-center">
						<view class="types_item_c_5"></view>
						<view class="types_item_text">下线</view>
					</view> -->
				</view>
			</view>
		</u-sticky>
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1A66FA"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="car_content">
				<view class="select_date flex align-center">
					<view class="date_view flex align-center justify-between" @tap.stop="pickerDiy1658997072074=true">
						<view class="date_view_1">{{modifyDay(today)}}</view>
						<view class="date_view_2">
							<text>选择日期</text>
							<u-icon name="arrow-right" size="28" color="#ccc"></u-icon>
						</view>
					</view>
					<view class="date_line">丨</view>
					<view class="date_today flex align-center justify-center">今日</view>
				</view>
				<view class="week_info flex align-center justify-between">
					<view class="week_item flex align-center justify-center" v-for="(item, index) in week" :key="index">
						<text>{{item}}</text>
					</view>
				</view>
				<view class="week_info flex align-center justify-between" style="border-bottom: 0;">
					<view class="week_item flex align-center justify-center" v-for="(item, index) in weekList"
						:key="index">
						<text :class="item.isBefore ? 'isBefore' : ''">{{item.day}}</text>
					</view>
				</view>
				<template v-for="(v, k) in dataList">
					<view class="car_type">
						{{v.car_name}}
					</view>
					<template v-for="(v1, k1) in v.carlist">
						<view class="car_no">
							<text>{{v1.car_number}}</text>
							<image :src='STATIC_URL+"480.png"' mode="aspectFill"></image>
						</view>
						<view class="input_list flex align-center justify-between">
							<template v-for="(v2, k2) in v1.leaseList">
								<view class="input_item_1" v-if="!v2.dayItem.kegou"></view>
								<template v-else>
									<view v-if="v2.dayItem.type == 0"
										class="input_item_3 flex align-center justify-center">
										<image :src='STATIC_URL+"481.png"' mode="aspectFill"></image>
									</view>
									<view v-if="v2.dayItem.type == 100" class="input_item_2"
										@tap.stop="selectReserve(k, k1, k2)"></view>
									<view v-if="v2.dayItem.type == 1" @tap.stop="selectReserve(k, k1, k2)"
										class="input_item_4 flex align-center justify-center">
										<image :src='STATIC_URL+"481.png"' mode="aspectFill"></image>
									</view>
									<!-- <template v-else>
										<view v-if="v2.dayItem.type == 100" class="input_item_2"
											@tap.stop="selectReserve(k, k1, k2)"></view>
										<view v-if="v2.dayItem.type == 1"
										@tap.stop="selectReserve(k, k1, k2)"	class="input_item_4 flex align-center justify-center">
											<image :src='STATIC_URL+"481.png"' mode="aspectFill"></image>
										</view>
									</template> -->

								</template>

							</template>
						</view>
					</template>

				</template>
				
				<view class="noData_other" v-if="dataList.length == 0 && !isShow">
					<image :src='STATIC_URL+"no.png"'></image>
				</view>

			</view>
			<view class="picker_btn flex align-center justify-between">
				<view class="picker_btn_1 flex align-center justify-center" @tap.stop="result">重置</view>
				<view class="picker_btn_2 flex align-center justify-center" @tap.stop="setReserve">设置停运</view>
			</view>

		</template>

		<view style="height: 140rpx;"></view>
		
		
		<benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1658997072074"
			:value.sync='today' endYear="2050-12-31" fields="day" mode='date' :mask-show='true' :timeout='true' :picker-height='100' default-type='value' @change="changeDay">
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between personalInformation_picker2_0'>
					<view class="personalInformation_picker2_0_c1">注册时间</view>
					<u-icon @tap="$refs.benbenWritePickerCodepicker2.cancel()" name="close" color="#CCCCCC"></u-icon>
				</view>
			</template>
			<template #picker-footer>
				<view class="bill_picker_btn flex align-center justify-between">
					<view class="bill_picker_btn_1 flex align-center justify-center" @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</view>
					<view class="bill_picker_btn_2 flex align-center justify-center" @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</view>
				</view>
			</template>
		</benben-picker>
	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				pickerDiy1658997072074: false,
				isShow: true,
				weekList: [],
				week: ['一', '二', '三', '四', '五', '六', '日'],
				today: "",
				dataList: [],
				keyword: "",
				car_id: "",
				is_submit: false
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let { car_id } = options;
			if (car_id !== undefined) this.car_id = car_id;
			this.today = this.getNowDay();
			this.getWeekDataList(this.today);
			this.getCarList();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取库存日历接口  postCarLeaseList
			getCarList() {
				this.$api.post(global.apiUrls.postCarLeaseList, {
					date: this.today,
					store_id: global.userInfo.store_id,
					keyword: this.keyword,
					car_id: this.car_id
				}).then(res => {
					setTimeout(() => {
						this.isShow = false;
					}, 300)
					if (res.data.code == 1) {
						if (res.data.data) {
							let arr = [];
							for (let key in res.data.data) {
								arr.push({
									car_id: key,
									car_name: res.data.data[key].name,
									list: res.data.data[key].items,
									carlist: []
								})
							}

							if (arr.length > 0) {
								arr.forEach((v, k) => {
									if (v.list) {
										for (let key in v.list) {
											v.carlist.push({
												id: key,
												car_number: v.list[key].car_number,
												lease: v.list[key].lease,
												leaseList: []
											})
										}

									}
								})
							}
							if (arr.length > 0) {
								arr.forEach((v, k) => {
									if (v.carlist.length > 0) {
										v.carlist.forEach((v1, k1) => {
											if (v1.lease) {
												for (let key in v1.lease) {
													v1.leaseList.push({
														day: key,
														dayItem: v1.lease[key]
													})
												}

											}
										})
									}

								})
							}
							this.dataList = arr;
							// console.log(this.dataList);
						}
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			selectReserve(k, k1, k2) {
				if (this.dataList[k].carlist[k1].leaseList[k2].dayItem.type == 100) {
					this.dataList[k].carlist[k1].leaseList[k2].dayItem.type = 1;
				} else {
					this.dataList[k].carlist[k1].leaseList[k2].dayItem.type = 100;
				}
				this.$forceUpdate();
			},
			// 设置预留
			setReserve() {
				if (this.is_submit) return;
				let lease = [];
				if (this.dataList.length > 0) {
					this.dataList.forEach((v, k) => {
						v.carlist.forEach((v1, k1) => {
							v1.leaseList.forEach((v2, k2) => {
								if (v2.dayItem.type == 1) {
									lease.push({
										id: v1.id,
										day: v2.day
									})
								}
							})
						})
					})
				}
				if (lease.length == 0) {
					this.$message.info('请选择预留日期');
					return;
				}
				let groupedItems = lease.reduce((acc, item) => {
					const existing = acc.find(i => i.id === item.id);
					if (existing) {
						existing.people.push(item.day);
					} else {
						acc.push({
							id: item.id,
							people: [item.day]
						});
					}
					return acc;
				}, []);
				let obj = {};
				for (var item in groupedItems) {
					obj[groupedItems[item].id] = groupedItems[item].people;
				};
				this.is_submit = true;
				this.$api.post(global.apiUrls.postSetReserved, {
					lease: JSON.stringify(obj)
				}).then(res => {
					this.$message.info(res.data.info);
					if (res.data.code == 1) {
						this.is_submit = false;
						this.isShow = true;
						this.getCarList();
					} else {
						this.is_submit = false;
					}
				}).catch(err => {
					this.is_submit = false;
				})
			},
			result() {
				this.keyword = "";
				this.isShow = true;
				this.today = this.getNowDay();
				this.getWeekDataList(this.today);
				this.getCarList();
			},
			changeDay(e) {
				this.isShow = true;
				this.getWeekDataList(this.today);
				this.getCarList();
			},
			getSearch() {
				this.isShow = true;
				this.getCarList();
			},
			modifyDay(dateStr) {
				const [year, month, day] = dateStr.split('-');
				return `${year}年${month}月${day}日`;
			},
			getNowDay() {
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，因此要加1
				let day = currentDate.getDate();
				let today = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
				return today;
			},
			getWeekDataList(data) {
				//根据日期获取本周周一~周日的年-月-日
				var weekList = [];
				var date = new Date(data);
				//判断本日期是否为周日，获取本周一日期
				if (date.getDay() == "0") {
					date.setDate(date.getDate() - 6);
				} else {
					date.setDate(date.getDate() - date.getDay() + 1);
				}
				var myDate = date.getDate();
				var myMonth = date.getMonth() + 1;
				if (date.getDate() < 10) {
					myDate = '0' + myDate;
				}
				if (date.getMonth() + 1 < 10) {
					myMonth = '0' + myMonth;
				}
				weekList.push({
					date: date.getFullYear() + "-" + myMonth + "-" + myDate,
					year: date.getFullYear(),
					month: myMonth,
					day: Number(myDate),
					week: this.week[0],
					isBefore: this.compareDates(this.today, date.getFullYear() + "-" + myMonth + "-" + myDate)
				});
				// 获取周二以后日期
				for (var i = 0; i < 6; i++) {
					date.setDate(date.getDate() + 1);
					myDate = date.getDate();
					myMonth = date.getMonth() + 1;
					if (date.getDate() < 10) {
						myDate = '0' + myDate;
					}
					if (date.getMonth() + 1 < 10) {
						myMonth = '0' + myMonth;
					}
					weekList.push({
						date: date.getFullYear() + "-" + myMonth + "-" + myDate,
						year: date.getFullYear(),
						month: myMonth,
						day: Number(myDate),
						week: this.week[i + 1],
						isBefore: this.compareDates(this.today, date.getFullYear() + "-" + myMonth + "-" + myDate)
					});
				}
				console.log(weekList);
				this.weekList = weekList;
			},
			// 比较两个日期先后顺序
			compareDates(date1, date2) {
				const dateObject1 = new Date(date1);
				const dateObject2 = new Date(date2);

				if (dateObject1.getTime() < dateObject2.getTime()) {
					return false;
				} else if (dateObject1.getTime() > dateObject2.getTime()) {
					return true;
				} else {
					return false;
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.search_view {
		padding: 16rpx 24rpx 0;
		border-radius: 0 0 32rpx 32rpx;
		background: #FFFFFF;
		position: relative;
		z-index: 10;

		.search_input {
			width: 702rpx;
			height: 80rpx;
			border: 2rpx solid #EEEEEE;
			border-radius: 16rpx;
			position: relative;
			padding: 0 24rpx 0 78rpx;

			image {
				position: absolute;
				left: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 25rpx;
				height: 25rpx;
			}

			.input {
				font-size: 30rpx;
			}
		}

		.types {
			padding: 32rpx 8rpx;

			.types_item {
				margin-right: 32rpx;

				.types_item_c_1 {
					width: 24rpx;
					height: 24rpx;
					background: #1A66FA;
					border-radius: 5rpx;
				}

				.types_item_c_2 {
					width: 24rpx;
					height: 24rpx;
					background: #00C969;
					border-radius: 5rpx;
				}

				.types_item_c_3 {
					width: 24rpx;
					height: 24rpx;
					background: #FC5B03;
					border-radius: 5rpx;
				}

				.types_item_c_4 {
					width: 24rpx;
					height: 24rpx;
					border: 1px solid #e7e7e7;
					border-radius: 5rpx;
				}

				.types_item_c_5 {
					width: 24rpx;
					height: 24rpx;
					background: #ccc;
					border-radius: 5rpx;
				}

				.types_item_text {
					font-weight: 400;
					font-size: 20rpx;
					color: #111111;
					margin-left: 8rpx;
				}
			}
		}
	}

	.car_content {
		background: #fff;
		border-radius: 32rpx 32rpx 0 0;
		// padding: 0 24rpx;
		position: relative;
		z-index: 10;
		margin-top: 20rpx;

		.select_date {
			padding: 40rpx 24rpx 18rpx;

			.date_view {
				flex: 1;

				.date_view_1 {
					font-weight: 500;
					font-size: 30rpx;
					color: #111111;
				}

				.date_view_2 {
					font-weight: 400;
					font-size: 30rpx;
					color: #CCCCCC;
				}
			}

			.date_line {
				font-weight: 400;
				font-size: 30rpx;
				color: #CCCCCC;
				margin: 0 30rpx;
			}

			.date_today {
				width: 104rpx;
				height: 56rpx;
				background: #1A66FA;
				border-radius: 5rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}

	.week_info {
		padding: 20rpx 32rpx;
		border-bottom: 1px solid #eee;

		.week_item {
			width: 72rpx;
			height: 42rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #111111;

			.isBefore {
				color: #ccc;
			}
		}
	}

	.car_type {
		margin: 16rpx 24rpx 0;
		padding: 16rpx;
		background: rgba(26, 102, 250, 0.05);
		font-weight: 500;
		font-size: 30rpx;
		color: #111111;
	}

	.car_no {
		display: inline-block;
		text-align: center;
		margin: 16rpx 24rpx;
		padding: 13rpx 16rpx;
		border-radius: 5rpx;
		border: 2rpx solid #E7E7E7;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-left: 8rpx;
		}
	}

	.input_list {
		padding: 0 24rpx;

		.input_item_1 {
			width: 72rpx;
			height: 62rpx;
			background: #f7f7f7;
			border-radius: 4rpx;
		}

		.input_item_2 {
			width: 72rpx;
			height: 62rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 2rpx solid #E7E7E7;
		}

		.input_item_3 {
			width: 72rpx;
			height: 62rpx;
			background: #1A66FA;
			border-radius: 4rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.input_item_4 {
			width: 72rpx;
			height: 62rpx;
			background: #FC5B03;
			border-radius: 4rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.picker_btn {
		width: 100%;
		position: fixed;
		z-index: 100;
		left: 0;
		bottom: 0;
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
		margin-top: 12rpx;
	}

	.picker_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}

	.picker_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}

	.page_line {
		width: 100%;
		height: 400rpx;
		background: #f6f7fb;
		position: fixed;
		top: 0;
	}

	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	
	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}
	
	.personalInformation_picker2_0_c1 {
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}
	
	.bill_picker_btn {
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
	}
	.bill_picker_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}
	.bill_picker_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 100;
		top: 0rpx;
		background: #fff;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto !important;
	}
</style>